<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
export default {
  name: 'curLine',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    },
    height: {
      type: Number,
      default: 340
    },
    isSmooth: {
      type: Boolean,
      default: true
    },
    isArea: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: Array,
      default: () => ['#28c76f', '#7AC9FD', '#fcad7b', '#fcf67b']
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        color: this.color,
        title: {
          text: this.title,
          textStyle: {
            fontSize: '18px',
            fontWeight: 'normal',
            color: '#fff'
          },
          top: '0',
          left: '30px'
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 0,
          textStyle: {
            fontSize: 12, //字体大小
            color: '#ffffff' //字体颜色
          },
          data: this.chartData.legend
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255,255,255,0)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              color: '#092b5d'
            }
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#24c4ff',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          scale: true,
          splitLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#24c4ff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: []
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      window.onresize = chartFactor.resize
      let List = this.chartData.y
      let series = []
      let xData = this.chartData.x
      for (let i in List) {
        let serie = {
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#7c80f4' // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)'
          },
          itemStyle: {
            color: 'rgba(14,30,73,1)',
            borderColor: '#646ace',
            borderWidth: 2
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [' {a|{c}}'].join(','),
              rich: {
                a: {
                  color: '#fff',
                  align: 'center'
                }
              }
            }
          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              type: 'linear',
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(124, 128, 244,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(124, 128, 244, 0)'
                  }
                ],
                globalCoord: false
              },
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: List[i],
          smooth: this.isSmooth
        }
        series.push(serie)
      }
      this.option.xAxis.data = xData[0]
      this.option.series = series
      chartFactor.setOption(this.option, true)
    }
  }
}
</script>
